/**
 * Created by xiangjiayu on 2017/7/19.  考评
 */

import React from 'react';
import {Icon,Button,Row,Col,Input,Select,DatePicker,Modal,AutoComplete,Table,Transfer,Form,Popconfirm} from 'antd';
import CheckBox from '../../../components/common/CheckBox/CheckBox';//自定义 多选框

const FormItem = Form.Item;

export default class Term extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            //弹窗
            Modal_term_Add: false,
            //可编辑表格
            dataSource: [{
              key: '0',
              shangkeriqi: '2017-07-18 周一',
              shijianduan: '09:00-12:00',
              name:'新生儿生活照',
              type:'理论课',
              teacher:'向老师'
            }, {
              key: '1',
              shangkeriqi: '2017-07-18 周一',
              shijianduan: '09:00-12:00',
              name:'新生儿生活照',
              type:'理论课',
              teacher:'向老师'
            }],
            count: 2,
        };
        this.columns = [
        {
          title: '上课日期',
          dataIndex: 'shangkeriqi',
          width: '16.67%',
          className:'ant-table-th-center'
        },
        {
          title: '时间段',
          dataIndex: 'shijianduan',
          width: '16.67%',
          className:'ant-table-th-center'
        },
        {
          title: '课程名称',
          dataIndex: 'name',
          width: '16.67%',
          className:'ant-table-th-center'
        },
        {
          title: '课程类型',
          dataIndex: 'type',
          width: '16.67%',
          className:'ant-table-th-center'
        },
        {
          title: '老师',
          dataIndex: 'teacher',
          width: '16.67%',
          className:'ant-table-th-center'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          render: (text, record, index) => {
            return (
              <div>
                <a href="#">修改</a>
              </div>
            );
          },
          className:'ant-table-th-center'
        }
      ];
    }
    //弹窗
        //新增
    showModal_term_Add(Modal_term_Add) {
        this.setState({ Modal_term_Add });
    }
    handleAdd = () => {
      const { count, dataSource } = this.state;
      const newData = {
        key: count,
        shangkeriqi:<Select defaultValue="选择日期">
          <Option key="选择日期" value="选择日期">选择日期</Option>
        </Select>,
        shijianduan:<Select defaultValue="选择时间">
          <Option key="选择时间" value="选择时间">选择时间</Option>
        </Select>,
        name:<Select defaultValue="选择课程">
          <Option key="选择课程" value="选择课程">选择课程</Option>
        </Select>,
        type:'-',
        teacher:<Select defaultValue="选择老师">
          <Option key="选择老师" value="选择老师">选择老师</Option>
        </Select>
      };
      this.setState({
        dataSource: [...dataSource, newData],
        count: count + 1,
      });
      setTimeout(
        function(){
          document.getElementById("cert").scrollTop  = document.getElementById("cert").scrollHeight;
        }, 100)

    }
    render(){
      const { dataSource } = this.state;
      const columns = this.columns;
        return(
            <div className="modal-example-cont">
                <Button onClick={() => this.showModal_term_Add(true)}>新增学期</Button>
                <Modal
                  title="新增学期"
                  wrapClassName="vertical-center-modal"
                  visible={this.state.Modal_term_Add}
                  onCancel={() => this.showModal_term_Add(false)}
                  width="1000"
                >
                    <div className="modal-add-cont">
                        <Row gutter={16}>
                            <Col span={2} className="text-r">
                                <div className="ant-form-item-label">
                                    <label><span className="span-left">学员姓名</span></label>
                                </div>
                            </Col>
                            <Col span={5}>
                                <div className="ant-form-item-control has-error">
                                    <Input size="large" placeholder="请输入学期名称"/>
                                </div>
                            </Col>
                            <Col span={5}>
                                <div className="error-tip"><Icon type="minus-circle-o" />请输入学期名称</div>
                            </Col>
                          <Col span={2} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">所属专业</span></label>
                            </div>
                          </Col>
                          <Col span={5}>
                            <div className="ant-form-item-control">
                              <Select
                                defaultValue="请选择所属专业"
                                size="large"
                              >
                                <Option value="中级育婴师">中级育婴师</Option>
                                <Option value="高级育婴师">高级育婴师</Option>
                              </Select>
                            </div>
                          </Col>
                        </Row>
                        <Row gutter={16}>
                          <Col span={2} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">课程表</span></label>
                            </div>
                          </Col>
                        </Row>
                        <div>
                          <div id="cert" className="modal-table-mh">
                            <Table bordered dataSource={dataSource} columns={columns} pagination={false}/>
                          </div>
                          <div className="foot-add"><Button onClick={this.handleAdd} type="primary" icon="plus">新增课程</Button></div>
                        </div>
                    </div>
                </Modal>
            </div>

        )
    }
}